<template>
	<div class="system-user-container">
		<el-card shadow="hover" class="mb15">
			<el-input  placeholder="请输入关键字" style="max-width: 180px" v-model="tableData.param.kw"
				v-on:keyup.enter="searchData" size="default"> </el-input>
			<el-button   type="primary" class="ml10" @click="searchData" size="default">
				<el-icon><Search /></el-icon>
				查询
			</el-button>
		</el-card>

		<el-card shadow="hover" class="mb15">
			<div class="my-w-e-toolbar">
				<el-button  class="ml10k" @click="onOpenAddUser" size="default">
					新增用户
				</el-button>
				<el-button  lass="ml10" @click="onOpenshowInfo" :disabled="currentRow===null" size="default">
					查看资料
				</el-button>
				<el-button   class="ml10" @click="onOpenEditUser" :disabled="currentRow===null" size="default">
					修改资料
				</el-button>
				<el-button   class="ml10" @click="onOpenUploadFace" :disabled="currentRow===null" size="default">
					设置头像
				</el-button>
				<el-button   class="ml10" @click="onOpenSetPass" :disabled="currentRow===null" size="default">
					设置密码
				</el-button>
				<el-button  class="ml10" @click="onOpenUsersRolesEdit" :disabled="currentRow===null" size="default">
					角色设置
				</el-button>
				<el-button   class="ml10" @click="onChangeStatus" :disabled="currentRow===null" size="default">
					{{currentRow===null?'账号设置':(currentRow.Status===0?'禁用账号':'启用账号')}}
				</el-button>
			</div>
		</el-card>

		<el-card shadow="hover">
			<el-table v-loading="tableData.loading" :data="tableData.data" style="width: 100%"
				@current-change="handleCurrentChange" highlight-current-row>
				<el-table-column prop="Number" label="编号" width="120">

				</el-table-column>
				<el-table-column prop="Avatar" label="头像" show-overflow-tooltip width="80">
					<template #default="scope">
						<div style="width: 40px">
							<el-image class="cropper-img" :src="PICURL+'/avatar/users/'+scope.row.Avatar+'?t='+Math.random()" lazy> </el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="Name" label="姓名" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column prop="AccountName" label="账号名" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="Status" label="状态" show-overflow-tooltip width="80">
					<template #default="scope">
						<span v-if="scope.row.Status === 0"> 正常 </span>
						<span v-else> 禁用 </span>
					</template>
				</el-table-column>
				<el-table-column prop="Roles" label="角色" show-overflow-tooltip width="250"></el-table-column>
				<el-table-column prop="LoginTime" label="登录时间" show-overflow-tooltip width="250">
					<template #default="scope">
						<span v-if="scope.row.LoginTime">
							{{ cf.dateFormatYMDHMS(null, null, scope.row.LoginTime * 1000) }}
						</span>
						<span v-else>
							-
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="LastIp" label="登录IP" show-overflow-tooltip width="100"></el-table-column>
				<el-table-column prop="CreateTime" label="创建时间" show-overflow-tooltip width="250">
					<template #default="scope">
						{{ cf.dateFormatYMDHMS(null, null, scope.row.CreateTime * 1000) }}
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="tableData.param.page" background
				v-model:page-size="tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="tableData.total">
			</el-pagination>
		</el-card>
		<UserForm ref="UserFormRef" />
		<SetUsersPass ref="SetUsersPassFormRef" />
		<UploadPicture ref="uploadFormRef" />
		<ShowInfo ref="showInfoRef" />
		<UsersRoles ref="UsersRolesref" />
	</div>
</template>

<script lang="ts">
	import {
		toRefs,
		reactive,
		onMounted,
		ref
	} from 'vue';

	import {
		//	ElMessageBox,
		ElMessage
	} from 'element-plus';

	import UserForm from '/@/views/users/component/UserForm.vue';
	import SetUsersPass from '/@/views/users/component/SetUsersPass.vue';
	import ShowInfo from '/@/views/users/component/ShowInfo.vue';
	import UploadPicture from '/@/components/cropper/UploadPicture.vue';
	import UsersRoles from '/@/views/users/component/UsersRoles.vue';

	import {
		getListAPI,
		disableAPI,
		enableAPI,
		uploadUsersFaceAPI
	} from '/@/api/users/index';
 
	import {
		deepClone
	} from '/@/utils/other';
	import cF from '/@/utils/commonFunction';
 
	export default {
		name: '',
		components: {
			UserForm,
			SetUsersPass,
			UploadPicture,
			ShowInfo,
			UsersRoles,
		},

		setup() {
		 
			const PICURL =
				import.meta.env.VITE_PIC_URL as any;
			 
			const currentRow = ref(null)
			const cf = new cF();
			const UserFormRef = ref();
			const SetUsersPassFormRef = ref();
			const uploadFormRef = ref();
			const showInfoRef = ref();
			const UsersRolesref = ref();
 
			const state: any = reactive({
				tableData: {
					data: [],
					total: 0,
					loading: false,
					param: {
						page: 1,
						pageSize: 10,
						kw: '',
					},
				},
				ruleForm: {
					id: 0,
					accountName: '',
					name: '',
					mobileTelephone: '',
					email: '',
					qq: '',
					wechat: '',
				},

			});
			// 获取云端数据
			const loadData = () => {
				state.tableData.loading = true;
				let param: object = state.tableData.param;
				getListAPI(param).then(async (response) => {
					//console.log(response);
					if (response.code === 0) {
						state.tableData.data = response.result.data;
						state.tableData.total = response.result.total;
						state.tableData.param.page = response.result.current_page;

					}
 
				}).finally(() => {
					state.tableData.loading = false;
				});;
			};
			// 打开新增用户弹窗
			const onOpenAddUser = () => {
				UserFormRef.value.openDialog({
						ID: '0',
						AccountName: '',
						Name: '',
						MobileTelephone: '',
						Email: '',
						QQ: '',
						Wechat: '',
					},
					reloadData
				);
			};
			// 角色设置
			const onOpenUsersRolesEdit = () => {
				UsersRolesref.value.openDialog(deepClone(currentRow.value), loadData);
			};
			// 打开修改用户弹窗
			const onOpenEditUser = () => {
				UserFormRef.value.openDialog(deepClone(currentRow.value), loadData);
			};

			//启用禁用
			const onChangeStatus = () => {
				let API = currentRow.value.Status === 0 ? disableAPI : enableAPI;
				API({
					ID: currentRow.value.ID,
				}).then(async (response) => {
					if (response['code'] === 0) {
						loadData();
						ElMessage.success(`${response.message}`);
					}
				});
			};
			// 分页改变
			const onHandleSizeChange = (val: number) => {
				state.tableData.param.pageSize = val;
				loadData();
			};
			// 点击页码
			const onHandleCurrentChange = (val: number) => {
				state.tableData.param.page = val;
				loadData();
			};
			// 页面加载时
			onMounted(() => {
				loadData();
			});
			const reloadData = () => {
				state.tableData.param.kw = '';
				state.tableData.param.page = 1;
				loadData();

			};
			const searchData = () => {
				state.tableData.param.page = 1;
				loadData();
			};

			const onOpenSetPass = () => {
				SetUsersPassFormRef.value.openDialog(deepClone(currentRow.value), null);
			};
			const onOpenUploadFace = () => {
				let row = deepClone(currentRow.value);
				let params = new FormData();
				params.append('ID', row.ID);
				let options = {
					title: '更换头像',
					btnUpload: '更换',
					btnCancel: '取消',
					UploadAPI: uploadUsersFaceAPI,
					callback: loadData,
					cropperSize: {
						width: 400,
						height: 400,
					},
					params: params,
					cropperopt: {
						aspectRatio: 1 / 1,
						autoCropArea: 0.95,
						preview: '.img-preview',
					},
				};
				uploadFormRef.value.openDialog(PICURL+'/avatar/users/'+row.Avatar + '?t=' + Math.random(), options);
			};
			const onOpenshowInfo = () => {
				showInfoRef.value.openDialog(deepClone(currentRow.value), null);
			};
			const handleCurrentChange = (row: Object) => {
				currentRow.value = row
			}
			return {
				reloadData,
				cf,
				searchData,
				UserFormRef,
				onOpenAddUser,
				onOpenEditUser,
				onChangeStatus,
				onHandleSizeChange,
				onHandleCurrentChange,
				SetUsersPassFormRef,
				onOpenSetPass,
				uploadFormRef,
				onOpenUploadFace,
				showInfoRef,
				onOpenshowInfo,
				...toRefs(state),
				UsersRolesref,
				onOpenUsersRolesEdit,
				handleCurrentChange,
				currentRow,
				PICURL,
			};
		},
	};
</script>

<style scoped lang="scss">
	.system-user-container {}

	.my-w-e-toolbar {
		text-align: right;
	}

	.cropper-img {
		margin: auto;
		border-radius: 100%;
	}
</style>
